<template>
  <div id="app">
    <div class="chunk-menu">
      <ep-menu
        is-router
        default-index="2"
        class="ep-menu-demo-vertical"
        style="box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12)"
        theme="light"
      >
        <ep-menu-item index="1" @click="$router.push('/home')">首页</ep-menu-item>
        <ep-submenu v-for="(item, key) in chunks" :key="key" :title="key">
          <ep-menu-item v-for="(option, pageName) in item" @click="handleClick(pageName)" :key="option.path" :index="`${key}-${option.path}`">
            {{ pageName }}
          </ep-menu-item>
        </ep-submenu>
      </ep-menu>
    </div>
    <div class="chunk-body" v-if="init">
      <tabBar class="chunk-body__tabbar" />
      <keep-alive>
        <router-view v-if="getUUID($route.path)" :key="getUUID($route.path) + '-' + $route.path"></router-view>
      </keep-alive>
    </div>
  </div>
</template>
<script>
// import test from '../dist/chunk/aaaa/hello'
// import '../dist/chunk/aaaa/hello.js'
// console.log(test);
import chunks from './chunk-register'
import tabBar from '@/layout/tabBar'
export default {
  name: 'app',
  components: {
    tabBar
  },

  data() {
    return {
      init: false,
      cpt: '',
      chunks
    }
  },

  computed: {
    appLoading() {
      return this.$store.state.app.appLoading
    },
    routeKeepAlive() {
      return this.$store.state.app.routeKeepAlive
    },
    includeRoute() {
      return this.routeKeepAlive.filter(v => v.keepAlive).map(v => v.route.path)
    }
  },
  mounted() {
    setTimeout(() => {
      this.init = true
    }, 500)
  },

  methods: {
    handleClick(key) {
      this.$router.push('/chunk/' + key)
    },
    getUUID(path) {
      let item = this.routeKeepAlive.find(v => v.key === path)
      let res = (item && item.uuid) || ''
      return res
    }
  }
}
</script>
<style lang="less">
// @import '~@/styles/vars.less';
// @import '~@/styles/public.less';
// 不要使用通用样式，因为这里的不会打包进chunk，如果需要chunk公共样式，可以自己新建个less，放在那里无所谓
// 如果新架子打的chunk给新架子用没问题，但是给老架子用，可能某些class是不存在于老家子的
// 因此建议chunk使用的class是独立的
// 只要在每个模块的入口文件(chunk/view/xxxx/index.js)中引入 或者在 build-chunk.js中 改成下面类似的代码
// entry[key] = [path.join(__dirname, '../src/styles/public.less'), path.join(__dirname, '../chunk', p.path)]

@import './styles/chunk-public.less';

html,
body {
  height: 100%;
}
#app {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  display: flex;
  position: relative;
  .chunk-menu {
    width: 170px;
    flex-shrink: 0;
    .ep-menu {
      height: 100%;
    }
  }
  .chunk-body {
    width: calc(100vw - 170px);
    display: flex;
    flex-direction: column;
    &__tabbar {
      height: 35px;
    }
  }
}
</style>
